<template>
	<view class="activity-container">
		<!-- 顶部导航栏 -->

		<!-- 固定在顶部的搜索筛选区域 -->
		<view class="search-filter">
			<view class="search-box">
				<!-- <u-input v-model="searchKey" placeholder="请输入活动名称/客户名称" prefix-icon="search" @confirm="handleSearch"
					clearable input-align="left" :border="false"></u-input> -->

				<u--input v-model="searchKey" placeholder="请输入活动名称/客户名称" prefix-icon="search" @confirm="handleSearch"
					shape="circle" clearable input-align="left" border="none"></u--input>
			</view>

			<!-- 筛选选择器 -->
			<view class="filter-picker" @click="showPicker = true">
				<text class="picker-text">{{ selectedType || '请选择活动类型' }}</text>
				<u-icon name="arrow-down" color="#666" size="24rpx"></u-icon>
			</view>
		</view>

		<!-- 筛选选择器 (u-picker) -->
		<u-picker :show="showPicker" :columns="typeList" keyName="label" @confirm="handlePickerConfirm"
			@cancel="showPicker = false" title="选择活动类型"></u-picker>

		<!-- 活动列表（占满剩余高度，内部滚动） -->
		<view class="activity-list">
			<scroll-view class="list-scroll" scroll-y @scrolltolower="loadMore">
				<view class="activity-card" v-for="(item, index) in activityList" :key="index"
					@click="handleDetail(item)">
					<view class="card-header">
						<text class="activity-title">{{ item.youxiName }}</text>
						<!-- <view class="activity-status" :style="{ backgroundColor: item.statusColor }">
							{{ item.status }}
						</view> -->
					</view>

					<!-- 	<view class="activity-date">
						<u-icon name="calendar" color="#999" size="24rpx"></u-icon>
						<text class="date-text">{{ item.youxiStime }} - {{ item.youxiEtime }}</text>
					</view> -->

					<view class="detail-item">
						<text class="detail-label">开始时间：</text>
						<text class="detail-value">{{ item.youxiStime }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">结束时间：</text>
						<text class="detail-value">{{ item.youxiEtime }}</text>
					</view>

					<view class="activity-detail">
						<view class="detail-item">
							<text class="detail-label">活动类型：</text>
							<!-- <text class="detail-value">{{ item.youxiType }}</text> -->
							<text class="detail-value">{{item.youxiType}}</text>
						</view>

					</view>
				</view>

				<!-- 空状态 -->
				<u-empty v-if="activityList.length === 0 && !loading" text="暂无活动数据" mode="list"
					class="empty-state"></u-empty>

				<!-- 加载中 -->
				<u-loading-page v-if="loading && activityList.length === 0" text="加载中"
					class="loading-state"></u-loading-page>

				<!-- 加载更多 -->
				<view class="load-more" v-if="activityList.length > 0 && !noMore">
					<u-loading-icon v-if="loadingMore" mode="circle" size="28rpx"></u-loading-icon>
					<text v-else>上拉加载更多</text>
				</view>

				<!-- 没有更多 -->
				<view class="no-more" v-if="noMore">
					已加载全部数据
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import api from "@/utils/api.js";
	import request from "@/utils/request.js";
	// 保持与之前相同的脚本逻辑
	export default {
		data() {
			return {
				searchKey: '',
				selectedType: '',
				selectedTypeValue: '',
				showPicker: false,
				typeList: [
					[
						{
							label: '银商联盟',
							value: '银商联盟'
						},
						{
							label: '产品营销',
							value: '产品营销'
						},
						{
							label: '品牌营销',
							value: '品牌营销'
						}
					]
				],
				activityList: [],
				page: 1,
				pageSize: 10,
				total: 35,
				loading: false,
				loadingMore: false,
				noMore: false
			};
		},
		onLoad() {
			this.loadActivityList();
		},
		methods: {
			getListData(data) {
				request(api.activeList, "GET", data)
					.then(res => {
						// console.log(res,"活动列表数据");
						this.activityList = res.rows
					})
					.catch(err => {
						console.log(err);
					})
			},
			navBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			showMore() {
				uni.showActionSheet({
					itemList: ['新增活动', '批量删除', '刷新列表'],
					success: (res) => {
						switch (res.tapIndex) {
							case 0:
								uni.navigateTo({
									url: '/pages/activity/add'
								});
								break;
							case 1:
								uni.showToast({
									title: '删除功能待实现',
									icon: 'none'
								});
								break;
							case 2:
								this.page = 1;
								this.activityList = [];
								this.loadActivityList();
								break;
						}
					}
				});
			},
			handleSearch() {
				this.page = 1;
				this.activityList = [];
				this.loadActivityList();
			},
			handlePickerConfirm(e) {
				console.log(e, '-')
				const {
					value,
					label
				} = e.value[0];
				this.selectedType = label;
				this.selectedTypeValue = value;
				this.showPicker = false;
				this.page = 1;
				let data={
					youxiType:value
				}
				this.getListData(data)
				// this.activityList = [];
				// this.loadActivityList();
			},
			async loadActivityList() {
				if (this.loading) return;
				this.loading = true;

				this.getListData() //活动管理列表

				// try {
				// 	// 模拟接口请求
				// 	setTimeout(() => {
				// 		const typeMap = ['幸运大转盘', '优惠券发放', '满减活动', '签到有礼'];
				// 		const statusMap = [{
				// 				text: '计划中',
				// 				color: '#ff9800'
				// 			},
				// 			{
				// 				text: '进行中',
				// 				color: '#4caf50'
				// 			},
				// 			{
				// 				text: '已结束',
				// 				color: '#9e9e9e'
				// 			},
				// 			{
				// 				text: '已取消',
				// 				color: '#f44336'
				// 			}
				// 		];
				// 		const mockData = Array.from({
				// 			length: this.pageSize
				// 		}, (_, i) => {
				// 			const id = (this.page - 1) * this.pageSize + i + 1;
				// 			return {
				// 				id,
				// 				title: `${typeMap[Math.floor(Math.random() * 4)]}活动${id}`,
				// 				startDate: `2025-0${7 + Math.floor(Math.random() * 2)}-${10 + Math.floor(Math.random() * 20)}`,
				// 				endDate: `2025-0${8 + Math.floor(Math.random() * 2)}-${10 + Math.floor(Math.random() * 20)}`,
				// 				type: typeMap[Math.floor(Math.random() * 4)],
				// 				target: `新增客户${50 + Math.floor(Math.random() * 150)}人`,
				// 				status: statusMap[Math.floor(Math.random() * 4)].text,
				// 				statusColor: statusMap[Math.floor(Math.random() * 4)].color
				// 			};
				// 		});
				// 		this.activityList = this.page === 1 ? mockData : [...this.activityList, ...mockData];
				// 		this.noMore = this.activityList.length >= this.total;
				// 	}, 500);
				// } catch (error) {
				// 	uni.showToast({
				// 		title: '加载失败',
				// 		icon: 'none'
				// 	});
				// } finally {
				// 	this.loading = false;
				// 	this.loadingMore = false;
				// }
			},
			loadMore() {
				if (this.loading || this.noMore) return;
				this.loadingMore = true;
				this.page++;
				this.loadActivityList();
			},
			handleDetail(item) {
				uni.navigateTo({
					url: `/pages/active/detail/detail?Id=${item.id}&code=${item.jlUsername}`
				})
			}
		}
	};
</script>

<style scoped>
	.activity-container {
		position: relative;
		min-height: 100vh;
		background-color: #f5f7fa;
		/* 减去导航栏高度（u-navbar默认高度为88rpx） */
		/* padding-top: 88rpx; */
		box-sizing: border-box;
	}

	/* 导航栏固定在最顶部 */
	::v-deep .u-navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
	}

	/* 搜索筛选区域固定在导航栏下方 */
	.search-filter {
		position: fixed;
		top: 0;
		/* 与导航栏高度一致 */
		left: 0;
		right: 0;
		z-index: 9;
		display: flex;
		padding: 16rpx;
		background-color: #fff;
		gap: 16rpx;
		align-items: center;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
		/* 底部阴影区分层级 */
	}

	.search-box {
		flex: 1;
		background-color: #f5f7fa;
		border-radius: 60rpx;
		padding: 0 20rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
	}

	.filter-picker {
		width: 240rpx;
		height: 70rpx;
		background-color: #f5f7fa;
		border-radius: 60rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #666;
	}

	/* 活动列表区域占满剩余高度 */
	.activity-list {
		/* 顶部距离 = 导航栏高度(88) + 筛选栏高度(102) */
		margin-top: 102rpx;
		height: calc(100vh - 102rpx);
		box-sizing: border-box;
	}

	/* 滚动容器 */
	.list-scroll {
		height: 100%;
		padding: 16rpx;
		box-sizing: border-box;
	}

	/* 活动卡片样式 */
	.activity-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 16rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.activity-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		max-width: 70%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.activity-status {
		font-size: 24rpx;
		color: #fff;
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
	}

	.activity-date {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		color: #666;
		font-size: 26rpx;
	}

	.date-text {
		margin-left: 8rpx;
	}

	.activity-detail {
		color: #666;
	}

	.detail-item {
		display: flex;
		margin-bottom: 12rpx;
		font-size: 26rpx;
	}

	.detail-label {
		color: #999;
		min-width: 140rpx;
	}

	/* 空状态和加载状态居中 */
	.empty-state,
	.loading-state {
		margin: 100rpx auto;
		text-align: center;
	}

	/* 加载更多样式 */
	.load-more {
		text-align: center;
		padding: 30rpx 0;
		color: #999;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
	}

	.no-more {
		text-align: center;
		padding: 30rpx 0;
		color: #999;
		font-size: 26rpx;
	}
</style>